<template>
  <div v-if="requestSuccess" class="postWrapper">
    <!-- 头部 -->
    <TopNav
      title="精彩跟帖"
      @jumpPage="$router.push('/postdetails/?id=' + $route.query.id)"
    />
    <!-- 遍历渲染评论 -->
    <Main
      v-for="comment in commentList"
      :key="comment.id"
      :commentMain="comment"
    />
    <!-- 加入底部评论部分 -->
    <InputDom @loadComment="loading" />
  </div>
</template>

<script>
// 导入头部
import TopNav from "../components/TopNav";
// 导入组件渲染
import Main from "../components/comment/Main";
// 导入底部输入框组件
import InputDom from "../components/comment/InputDom";
export default {
  data() {
    return {
      commentList: [],
      requestSuccess: "",
    };
  },
  components: {
    Main,
    TopNav,
    InputDom,
  },
  created() {
    // 发送请求获取所有的评论
    this.loading();
    /*  this.$axios({
      url: "/post_comment/" + this.$route.query.id,
    }).then((res) => {
      console.log(res);
      //   将响应成功的一个属性绑定在本地的data数据里
      this.requestSuccess = res.statusText;
      //   获取所有的评论数据,将其绑定在data里
      this.commentList = res.data.data;
    }); */
  },
  methods: {
    loading() {
      // 发送请求获取所有的评论
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      }).then((res) => {
        // console.log(res);
        //   将响应成功的一个属性绑定在本地的data数据里
        this.requestSuccess = res.statusText;
        //   获取所有的评论数据,将其绑定在data里
        this.commentList = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.postWrapper {
  margin-bottom: 70/360 * 100vw;
}
.tips {
  font-size: 14/360 * 100vw;
  color: #888;
  text-align: center;
  margin: 20/360 * 100vw auto;
}
</style>
